<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        .box{
            height:400px;
            width:200px;
            border:5px solid red;
            margin:0 auto;

            /* 弹性盒容器 有6个属性 */
            /* 弹性盒 
               默认盒子水平排列
               浮动+vertical-align 不生效
            */
            display: flex;
            /* 
               排列方向：决定主轴的方向
               row 水平
               column 垂直
               row-reverse 倒叙水平排列
               column-reverse 倒叙垂直排列
             */
            /* flex-direction:column-reverse; */

            /* 是否换行
            nowrap 不换行，都会被挤压
            wrap 换行，不会挤压
            wrap-reverse：倒叙换行 */
            flex-wrap: wrap;


            /* 侧轴对齐方向 
            flex-start 顶部对齐（有高度，默认）
            flex-end 底部对齐
            center  居中对齐
            baseline  基线对齐
            stretch 拉伸(里面的盒子没有高度),盒子不设置高度默认就是拉伸
            */
            /* align-items:stretch; */

            /* flex-direction+flex-wrap */
            /* flex-flow:row wrap; */
            /* flex-direction:column; */

            /* 主轴上的对齐方式（x轴正）
               flex-start  左默认
               flex-end  右默认
               space-between 两端对齐，两端无缝隙
               space-around 两端对齐，两端有缝隙,两端缝隙是内容的半
               space-evenly 两端对齐，两端有缝隙,缝隙相同
             */

            /* justify-content:space-evenly; */
        
            /* 多根轴线的对齐方式
              flex-start
              flex-end
              center
              space-between
              space-around
              stretch 默认
             */
            align-content:stretch;
        }
        .boxa{
            height:100px;
            width:100px;
            background-color: aqua;
        }
        .boxb{
            height:100px;
            width:100px;
            background-color: blueviolet;
        }
        .boxc{
            height:100px;
            width:100px;
            background-color: brown;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="boxa">1</div>
        <div class="boxb">2</div>
        <div class="boxc">3</div>
    </div>
</body>
</html>